<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>GoJS&reg; Binding Class</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/highlight.js"></script>
    <script src="../../assets/js/api.js"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
    <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />

    </head>

    <body>
    <!--
  <div id="topbar">
    <div id="topbar-inner">
      <ul>
        <li><a href="../../index.html">Home</a></li>
        <li><a href="../../learn/index.html">Learn</a></li>
        <li><a href="../../samples/index.html">Samples</a></li>
        <li><a href="../../intro/index.html">Intro</a></li>
        <li><a href="../index.html">API</a></li>
        <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
        <li><a href="../../doc/download.html">Download</a></li>
        <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
        <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
        <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
        <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
      </ul>
    </div>
  </div>
-->


  <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../../index.html">Home</a></li>
            <li><a href="../../learn/index.html">Learn</a></li>
            <li><a href="../../samples/index.html">Samples</a></li>
            <li><a href="../../intro/index.html">Intro</a></li>
            <li><a href="../../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container-fluid" id="api-container">
    <div class="row">

<!-- ============================== classes index ============================ -->
     <div id="navindex" class="col-md-2">
        <!-- begin publish.classesIndex -->
        <!-- <div><a href="../index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




        <!-- end publish.classesIndex -->
    </div>

    <div id="contentBody" class="col-md-10">
    <!-- ============================== header ================================= -->
    <div id="header" class="fineprint mt30">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
    </div>

<!-- ============================== class title ============================ -->
            <h2 class="classTitle mt30">
                
                Class Binding
                
            </h2>

<!-- ============================== class summary ========================== -->
      <span class="hideshowall">
        <span class="nodetails"><button id="buttonShow">Show Details</button></span>
        <span class="details"><button id="buttonHide">Show Summaries</button></span>
      </span>

            <p class="classsummary">
                
                

                A Binding describes how to automatically set a property on a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>to a value of a property of data in the model.The target property name and the data source property name are strings.All name matching is case-sensitive.<p>Register bindings by calling <a href="../symbols/GraphObject.html#bind" class="linkMethod">GraphObject.bind</a> with a new Binding.Existing bindings become read-only, and no new bindings may be added,when a template (a <a href="../symbols/Part.html" class="linkConstructor">Part</a>) is copied.Bindings will be shared by all copies of the template's GraphObjects.<p>For example, your node data might be like:<pre>{ key: 23, say: "hello!" }</pre><p>Your simple node template might be like:<pre>  var template = new go.Node(go.Panel.Auto);  // . . . define the rest of the Node's visual tree . . .  var txt = new go.TextBlock();  txt.bind(new go.Binding("text", "say"));  template.add(txt);  myDiagram.nodeTemplate = template;</pre>Using <a>GraphObject.make</a> it might look like:<pre>  var $ = go.GraphObject.make;  myDiagram.nodeTemplate =    $(go.Node, "Auto",      . . .      $(go.TextBlock, new go.Binding("text", "say"))    )</pre><p>The data binding causes the <a href="../symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> property ofthe TextBlock to be set to the value of the data's "say" property.If the value of the "say" property of a particular data object is undefined,the binding is not evaluated: the target property is not set.If there is an error with the binding, you may see a message in the console log.For this reason you may want to explicitly set the initial value for a propertywhen defining the GraphObject, since that value will remain as the default valueif the Binding is not evaluated.<p>Sometimes the data value needs to be modified or converted in orderto be used as the new value of a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property.The most common conversion functions are provided for you --they convert a string to a geometric class:<a href="../symbols/Point.html#.parse" class="linkStatic">Point.parse</a>, <a href="../symbols/Size.html#.parse" class="linkStatic">Size.parse</a>, <a href="../symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a>,<a href="../symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a>, <a href="../symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a>, and <a href="../symbols/Geometry.html#.parse" class="linkStatic">Geometry.parse</a>.But you can easily define your own conversion function.<p>As an example of a conversion function, let's use a function that adds sometext prefixing the data property value:<pre>  new go.Binding("text", "say", function(v) { return "I say: " + v; })</pre><p>By default bindings are <a href="../symbols/Binding.html#OneWay" class="linkConstant">Binding.OneWay</a>.OneWay bindings are evaluated when the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property is setor when you call <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> or <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>.OneWay bindings only transfer values from the source to the target.<p>TwoWay bindings are evaluated in the source-to-target direction just as OneWaybindings are evaluated.However when the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> target property is set, the TwoWaybindings are evaluated in the target-to-source direction.There is no point in having a TwoWay binding on a GraphObject property that cannot be set.For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.<p>You should not have a TwoWay binding with a source that is a node data object's key property,i.e. on the data property whose name is the same as the value of <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">Model.nodeKeyProperty</a>.Unintentionally changing the node key value to be the same as another node data's key valuemay cause indeterminate behavior.Furthermore, changing a node data key without changing any references to that nodeusing the key value will result in "dangling" references and inconsistent relationships.You can make that change safely by calling <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">Model.setKeyForNodeData</a>,but not via a data binding.<p>The target-to-source update can also go through a conversion function.The most common back-conversion functions are provided for you.They convert a geometric class to a string:<a href="../symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a>, <a href="../symbols/Size.html#.stringify" class="linkStatic">Size.stringify</a>, <a href="../symbols/Rect.html#.stringify" class="linkStatic">Rect.stringify</a>,<a href="../symbols/Margin.html#.stringify" class="linkStatic">Margin.stringify</a>, <a href="../symbols/Spot.html#.stringify" class="linkStatic">Spot.stringify</a>, and <a href="../symbols/Geometry.html#.stringify" class="linkStatic">Geometry.stringify</a>.<p>It is common to want to update some data properties based on changes to the diagram.For example, as the user changes the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> by dragging a Node,you can automatically keep the node's model data in sync using a TwoWay binding.<pre>  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)</pre>The call to <a href="../symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a> changes the <a href="../symbols/Binding.html#mode" class="linkProperty">Binding.mode</a>to be <a href="../symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a> and specifies the <a href="../symbols/Binding.html#backConverter" class="linkProperty">Binding.backConverter</a>function to be the <a href="../symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a> static function.<p>Because the Binding is on the whole node (<code>template</code>),the target object is the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> and the target property is "location".The value of <code>data.loc</code> will be a string representation of the <code>Node.location</code> value.<p>The target of a Binding is always a property of a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> or a <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.The source of a Binding is normally a property of a data object in the model.But it is also possible to have the source of a Binding be another GraphObject that is in the same Part.You just have to make sure that object has a unique <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> or is the Part itself.The source property on the GraphObject has to be settable, and the Part must have a value for <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>.(If the source property setter does not notify about property value changes, the binding mechanism will not be invoked.Similarly, if there is no Panel.data, the binding mechanism is not active.)<p>As a common kind of example of data binding between two properties of GraphObjects,consider this Binding on a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> which changes the color of the <a href="../symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a>depending on whether the Node is selected (<a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a>):<pre>  new go.Binding("stroke", "isSelected", function(s) { return s ? "dodgerblue" : "gray"; }).ofObject()</pre>Note the call to <a href="../symbols/Binding.html#ofObject" class="linkMethod">Binding.ofObject</a>, which tells the Binding that it should use as the sourcea GraphObject with a particular name.  However that name argument is optional -- supplying no name(or supplying an empty string) will cause the binding to operate with the root GraphObject.In this case that would be the Node itself.Now with this binding whenever the value of <a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> changes, this Shape's stroke changes color.The conversion function is what changes the boolean "isSelected" value to a brush color specifier.<p>The binding functionality also has more advanced features for less common situations.The source property name may be an empty string, to convert the object as a whole.Conversion functions may take a second argument that takes the object that is bound.For source-to-target conversions, the second argument will be the <a>GraphObject</a> whose property is bound.For target-to-source conversions, the second argument will be the source data object.<p>Here's an example of a two-way data-binding using two custom conversion functions working with two separate data properties.First we define the two conversion functions.<pre>  function toLocation(data, node) {    return new go.Point(data.x, data.y);  };  function fromLocation(loc, data) {    data.x = loc.x;    data.y = loc.y;  };</pre><p>Then to data-bind the default template's <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> propertyto two separate data properties, "x" and "y":<pre>  new go.Binding("location", "", toLocation).makeTwoWay(fromLocation)</pre><p>An empty string argument for the <i>sourceprop</i> parameter indicatesthat the whole data object should be passed to the <code>toLocation</code> function,rather than the value of some property of that data.The return value is used as the new value for the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> property.In almost all cases the second argument is not used.For efficiency reasons you should try to avoid using an empty source property name.<p>The binding works normally for the source-to-target direction.But when the target property is modified it is the source property that isset with the back-converted property value from the target object.Because in this example the source property name is the empty string,and because one cannot replace the whole source data object,any return value from the conversion function is ignored.Instead the conversion function has to modify the data object directly,as this example <code>fromLocation</code> function does.
            </p>

<!-- ============================== constructor summary ==================== -->
            
        <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
            <div class="table-responsive">
            <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Binding.">
                <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name" >
                            <div class="name">
                                Binding(targetprop, sourceprop, conv)
                            </div>
              </td>
              <td class="description">
                            <div class="description">
                            <!--newp--><p><p>The constructor creates a one-way binding.<span class="nodetails" id="xconBinding"><a class="morelink" onclick="hst('conBinding')">More...</a></span> <span class="details" id="conBinding"></span>
                        
                            <dl class="detailList">
                            <dt class="heading">Parameters:</dt>
                            
                                <dt>
                                    <span class="light fixedFont">{string=}</span>  <b>targetprop</b>
                                    
                                </dt>
                                    <dd>A string naming the target property on the target object.  This should not be the empty string.</dd>
                            
                                <dt>
                                    <span class="light fixedFont">{string=}</span>  <b>sourceprop</b>
                                    
                                </dt>
                                    <dd>A string naming the source property on the bound data object.  If this is the empty string, the whole <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> object is used.  If this argument is not supplied, the source property is assumed to be the same as the target property.</dd>
                            
                                <dt>
                                    <span class="light fixedFont">{function(*,*=) | null=}</span>  <b>conv</b>
                                    
                                </dt>
                                    <dd>A side-effect-free function converting the data property value to the value to set the target property.  If the function is null or not supplied, no conversion takes place.</dd>
                            
                            </dl>
                        
                        


              </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div><!-- class="table-responsive">-->
            

<!-- ============================== properties summary ===================== -->
            
                
                
        <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
        <div class="table-responsive">
        <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Binding.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Value Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
              <tr id="backConverter" >
                
                <td class="name">
                  <div class="name">
                    backConverter
                  </div>
                  <div class="attributes">
                    <span class="light">{function(*,*=) | null}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a converter function to apply to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property valuein order to produce the value to set to a data property.<span class="nodetails" id="xpropbackConverter"><a class="morelink" onclick="hst('propbackConverter')">More...</a></span> <span class="details" id="propbackConverter">This conversion function is only used in a TwoWay binding,when transferring a value from the target to the source.The default value is null -- no conversion takes place.Otherwise the value should be a function that takes one or two argumentsand returns the desired value.However, the return value is ignored when the <a href="../symbols/Binding.html#sourceProperty" class="linkProperty">sourceProperty</a>is the empty string.</span><div class="details" id="dpropbackConverter"><p>Conversion functions must not have any side-effects other than settingthe source property.<p>The function is passed the value from the target(the first argument) and the source <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> object (the second argument).If the <a href="../symbols/Binding.html#sourceProperty" class="linkProperty">sourceProperty</a> is a property name, that property is set tothe function's return value.If the <a href="../symbols/Binding.html#sourceProperty" class="linkProperty">sourceProperty</a> is the empty string, the function shouldmodify the second argument, which will be the source data object.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="converter" >
                
                <td class="name">
                  <div class="name">
                    converter
                  </div>
                  <div class="attributes">
                    <span class="light">{function(*,*=) | null}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a converter function to apply to the data property valuein order to produce the value to set to the target property.<span class="nodetails" id="xpropconverter"><a class="morelink" onclick="hst('propconverter')">More...</a></span> <span class="details" id="propconverter">This conversion function is used in both OneWay and TwoWay bindings,when transferring a value from the source to the target.The default value is null -- no conversion takes place.Otherwise the value should be a function that takes one or two argumentsand returns the desired value.However, the return value is ignored when the <a href="../symbols/Binding.html#targetProperty" class="linkProperty">targetProperty</a>is the empty string.</span><div class="details" id="dpropconverter"><p>Conversion functions must not have any side-effects other than settingthe target property.  In particular you should not try to modify thestructure of the visual tree in the target GraphObject's Part's visual tree.<p>The function is passed the value from the source(the first argument) and the target <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> (the second argument).If the <a href="../symbols/Binding.html#targetProperty" class="linkProperty">targetProperty</a> is a property name, that property is set tothe function's return value.If the <a href="../symbols/Binding.html#targetProperty" class="linkProperty">targetProperty</a> is the empty string, the function shouldset a property on the second argument, which will be the target GraphObject.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="mode" >
                
                <td class="name">
                  <div class="name">
                    mode
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the directions and frequency in which the binding may be evaluated.<span class="nodetails" id="xpropmode"><a class="morelink" onclick="hst('propmode')">More...</a></span> <span class="details" id="propmode">The default value is <a href="../symbols/Binding.html#OneWay" class="linkConstant">Binding.OneWay</a>.<a href="../symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a> is the other choice.</span><div class="details" id="dpropmode"><p>Use OneWay bindings to initialize GraphObject properties based on model data,or to modify GraphObject properties when the model data changes with a call to <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>.Use TwoWay bindings to keep model data in sync with changes to GraphObject properties.For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.<p>You should not have a TwoWay binding on a node data object's key property.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="sourceName" >
                
                <td class="name">
                  <div class="name">
                    sourceName
                  </div>
                  <div class="attributes">
                    <span class="light">{?string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that should act as a source objectwhose property should be gotten by this data binding.<span class="nodetails" id="xpropsourceName"><a class="morelink" onclick="hst('propsourceName')">More...</a></span> <span class="details" id="propsourceName">The default value is null, which uses the bound <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> as the source.If the value is a string, it should be the name of a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in thevisual tree of the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that is bound to the data.Use the empty string to refer to the root panel, which is typically the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> or <a href="../symbols/Link.html" class="linkConstructor">Link</a>,but will be a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> if used in a <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">Panel.itemTemplate</a>.The name must not contain a period.</span><div class="details" id="dpropsourceName"><p>Binding only works if the source property is settable, not on computed or read-only properties,and if it supports notification.The documentation for the GraphObject (or subclass of GraphObject) property will indicate if the property is settableand if it does not notify.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="sourceProperty" >
                
                <td class="name">
                  <div class="name">
                    sourceProperty
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the property to get from the bound data object,the value of <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>.<span class="nodetails" id="xpropsourceProperty"><a class="morelink" onclick="hst('propsourceProperty')">More...</a></span> <span class="details" id="propsourceProperty">The default value is the empty string, which results in setting the targetproperty to the whole data object, rather than to a property value of the data object.If <a href="../symbols/Binding.html#sourceName" class="linkProperty">sourceName</a> is not null, then this property names the settableproperty on the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> or <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>that acts as the source.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="targetProperty" >
                
                <td class="name">
                  <div class="name">
                    targetProperty
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the property to be set on the target <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.<span class="nodetails" id="xproptargetProperty"><a class="morelink" onclick="hst('proptargetProperty')">More...</a></span> <span class="details" id="proptargetProperty">The default value is the empty string; you should set this to be the name of a property.</span>
                
                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
            

<!-- ============================== methods summary ======================== -->
            
                
                
        <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class Binding.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Return Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
            <tr id="copy">
                <td class="name">
                  
                  <div class="name">
                    copy()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Create a copy of this Binding, with the same property values.
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="makeTwoWay">
                <td class="name">
                  
                  <div class="name">
                    makeTwoWay(backconv)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Modify this Binding to set its <a href="../symbols/Binding.html#mode" class="linkProperty">mode</a> to be <a href="../symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a>, andprovide an optional conversion function to convert <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> propertyvalues back to data values, as the value of <a href="../symbols/Binding.html#backConverter" class="linkProperty">backConverter</a>.<span class="nodetails" id="xmethmakeTwoWay"><a class="morelink" onclick="hst('methmakeTwoWay')">More...</a></span> <span class="details" id="methmakeTwoWay"></span><div class="details" id="dmethmakeTwoWay"><p>Use TwoWay bindings to keep model data in sync with changes to GraphObject properties.For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.It is typical only to use TwoWay bindings on properties that are modified by tools or commands.Examples include <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> by <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> and<a href="../symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> by <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a> (only if <a href="../symbols/TextBlock.html#editable" class="linkProperty">TextBlock.editable</a> is true).<p>You should not have a TwoWay binding on a node data object's key property.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{function(*,*=) | null=}</span> <b>backconv</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> this two-way Binding.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="ofObject">
                <td class="name">
                  
                  <div class="name">
                    ofObject(srcname)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Modify this Binding to set its <a href="../symbols/Binding.html#sourceName" class="linkProperty">sourceName</a> property so as to identifya <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the visual tree of the bound <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as the data source,instead of the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> as the data source.<span class="nodetails" id="xmethofObject"><a class="morelink" onclick="hst('methofObject')">More...</a></span> <span class="details" id="methofObject"></span><div class="details" id="dmethofObject"><p>This permits data binding on GraphObject properties, such as <a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a>.Remember that you can reliably data bind only on settable properties, not on read-only or computed properties.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>srcname</b>
                                          
                                      </dt>
                                      <dd>the <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> of an element in the visual tree of the bound <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>;use an empty string to refer to the root panel of that visual tree, whose <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> is the bound data.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> this Binding to another GraphObject.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id=".parseEnum">
                <td class="name">
                  &lt;static&gt; 
                  <div class="name">
                    Binding.parseEnum(ctor, defval)
                  </div>
                  <div class="attributes">
                    <span class="light">{function(string):EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This static function can be used to create a function that parsesa string into an enumerated value, given the class that the enumeration valuesare defined on and a default value if the string cannot be parsed successfully.<span class="nodetails" id="xmethparseEnum"><a class="morelink" onclick="hst('methparseEnum')">More...</a></span> <span class="details" id="methparseEnum"></span><div class="details" id="dmethparseEnum"><p>The normal usage is to pass the result of this function as the conversion function of a <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>.<pre>linktemplate.bind(new go.Binding('routing', 'dataPropName', go.Binding.parseEnum(go.Link, go.Link.Normal)));</pre>This binding will try to parse the string that is the value of the bound data's "dataPropName" property.If it is a legitimate enumerated value defined on the <a href="../symbols/Link.html" class="linkConstructor">Link</a> class, the conversionfunction will return that value.If the bound data's "dataPropName" property is not present or has an unrecognized value,the <a href="../symbols/Link.html#routing" class="linkProperty">Link.routing</a> property gets the default value, <a href="../symbols/Link.html#Normal" class="linkConstant">Link.Normal</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{function()}</span> <b>ctor</b>
                                          
                                      </dt>
                                      <dd>the class constructor that defines the enumerated values that are being parsed.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{EnumValue}</span> <b>defval</b>
                                          
                                      </dt>
                                      <dd>the default enumerated value to return if it fails to parse the given string.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{function(string):EnumValue}</span> a function that takes a string and returns an enumerated value.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id=".toString">
                <td class="name">
                  &lt;static&gt; 
                  <div class="name">
                    Binding.toString(val)
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This static function can be used to convert an object to a string,looking for commonly defined data properties, such as "text", "name", "key", or "id".<span class="nodetails" id="xmethtoString"><a class="morelink" onclick="hst('methtoString')">More...</a></span> <span class="details" id="methtoString">If none are found, this just calls toString() on it.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>val</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{string}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
            
<!-- ============================== events summary ======================== -->
            

<!-- ============================== fields summary ===================== -->
            
                
                
                <h2 class="summaryCaption">Constants<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Binding.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                        <tr id="OneWay">
                            <td class="name">
                                <div class="name">
                                OneWay
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Binding.html#mode" class="linkProperty">Binding.mode</a> uses data source values and sets <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties.<span class="nodetails" id="xfldOneWay"><a class="morelink" onclick="hst('fldOneWay')">More...</a></span> <span class="details" id="fldOneWay">Bindings are evaluated when <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> is called.</span>
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="TwoWay">
                            <td class="name">
                                <div class="name">
                                TwoWay
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Binding.html#mode" class="linkProperty">Binding.mode</a> uses data source values and <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties and keeps them in sync.<span class="nodetails" id="xfldTwoWay"><a class="morelink" onclick="hst('fldTwoWay')">More...</a></span> <span class="details" id="fldTwoWay">When <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> is called, the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties are set.When <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties are modified, the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> properties are set.</span>
                            

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

            

<!-- ============================== constructor details ==================== -->

        </div> <!-- end contentBody -->
    </div> <!-- end row -->
    </div> <!-- end container-fluid -->

<!-- ============================== footer ================================= -->
        <div id="footer" class="fineprint" style="clear:both">
            Copyright &copy; 1998-2016 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
        </div>
    </body>
</html>
